<template>
    <view class="coreshop-padding-10 coreshop-margin-10 coreshop-bg-white coreshop-border-radius-trbl-18" v-if="listData && count">
        <view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-min-height-30">
            <view class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">{{coreshopData.parameters.title}}</view>
            <u-icon name="arrow-right-double" size="12" label="查看更多" labelSize="12" labelPos="left" @tap="goGroupPurchase()"></u-icon>
        </view>
        <view class="coreshop-divider">
            <view class="complete"></view>
        </view>
        <view class="coreshop-flex-direction coreshop-margin-bottom-10 coreshop-text-black" v-for="(item, key) in listData" :key="key">
            <view class="coreshop-flex">
                <view>
                    <u--image :src="item.goodThumbnail" mode="widthFix" width="96px" height="96px" radius="8"></u--image>
                </view>
                <view class="coreshop-flex coreshop-flex-direction coreshop-padding-left-10 coreshop-percent-100">
                    <view class="coreshop-font-15 u-line-2 coreshop-text-black">{{ item.name }}</view>
                    <view class="coreshop-font-11 coreshop-padding-top-5 coreshop-padding-bottom-3 u-line-2 coreshop-text-brown">{{ item.goodName }}</view>
                    <view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-start coreshop-min-height-30" v-if="(item.startStatus == 1) && item.timestamp">
                        <view class="coreshop-font-12">仅剩：</view><u-count-down :time="item.timestamp*1000" format="DD天HH时mm分ss秒" autoStart></u-count-down>
                    </view>
                    <view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-start coreshop-min-height-30" v-if="(item.startStatus == 0) && item.timestamp">
                        <view class="coreshop-font-12">即将开始：</view><u-count-down :time="item.timestamp*1000" format="DD天HH时mm分ss秒" autoStart></u-count-down>
                    </view>
                    <view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-start coreshop-min-height-30" v-if="(item.startStatus == 2) && item.timestamp">
                        <view class="coreshop-font-12">已结束：</view><u-count-down :time="item.timestamp*1000" format="DD天HH时mm分ss秒" autoStart></u-count-down>
                    </view>
                    <view class="coreshop-flex coreshop-justify-between coreshop-flex-direction-row coreshop-align-center">
                        <view class="coreshop-flex coreshop-align-center">
                            <view class="coreshop-font-14 coreshop-text-red">￥{{item.price}}</view>
                            <view class="coreshop-font-xs coreshop-text-through coreshop-margin-left-5">{{item.mktPrice}}元</view>
                        </view>
                        <view class="coreshop-groupPurchase-btn" v-if="item.startStatus == 1" @click="goGroupBuyingDetail(item.id)">立即团</view>
                        <view class="coreshop-groupPurchase-btn" v-if="item.startStatus == 0">即将开始</view>
                        <view class="coreshop-buy-btn-disabled" v-if="item.startStatus == 2">已结束</view>
                    </view>
                </view>
            </view>
            <view v-if="key+1 < listData.length">
                <view class="coreshop-divider">
                    <view class="groupPurchase"></view>
                    <view class="dot">●</view>
                    <view class="groupPurchase"></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "coreshopGroupPurchase",
        props: {
            coreshopData: {
                // type: Array,
                required: false,
            }
        },
        data() {
            return {
                listData: [],
            }
        },
        mounted() {
            this.listData = uni.$u.deepClone(this.coreshopData.parameters.list);
        },
        computed: {
            count() {
                if (!this.coreshopData) {
                    return false;
                }
                if (!this.coreshopData.parameters) {
                    return false;
                }
                if (!this.coreshopData.parameters.list) {
                    return false;
                }
                return (this.coreshopData.parameters.list.length > 0)
            }
        },
        methods: {
            end(index) {
                let _that = this;
                _that.list.splice(index, 1)
            },
            onChange(e, key) {
                this.$set(this.listData[key], 'timeData', e)
            },
        },
    }
</script>

<style lang="scss" scoped>
    .img-list-item { border-radius: 8px; margin: 2.5px 2.5px 10px 2.5px; background-color: #ffffff; padding: 5px; position: relative; overflow: hidden; flex-direction: row;
        .img-list-item-l { width: 100px; height: 100px; display: inline-block; float: left; }
        .img-list-item-r { width: calc(100% - 120px); display: inline-block; margin-left: 7.5px; float: left; position: relative;
            .description { font-size: 12px; color: #929292; }
            .item-c { width: 100%; margin-top: 0;
                .btnCart { float: right; }
            }
        }
    }

    .u-count-down__text { font-size: 12px; }
</style>
